<template>
	<view style="background-color: #FFFFFF;">
		<view class="timeBg">
			<view @tap="onSelectDay(-1)" class="timeAllV">全部</view>
			<view @tap="onSelectDay(key)" class="itemTimeV" v-for="(item,key) in dayList" :key="key">
				<view :class="dayListPos==key?'timeTvTo':'timeTv'">{{item.day}}</view>
				<view :class="dayListPos==key?'dayTvTo':'dayTv'">{{item.week}}</view>
			</view>
		</view>
		<view class="typeBg">
			<view class="typeAllV">类型</view>
			<scroll-view class="typeScrV" scroll-x="true" :show-scrollbar='false'>
				<view @tap="onSelectType(key)" :class="typeListPos==key?'typeItemVTo':'typeItemV'"
					v-for="(item,key) in typeList" :key="key">{{item.name}}</view>
			</scroll-view>
		</view>
		<view class="topicBg">
			<view class="topicAllV">主题</view>
			<scroll-view class="topicScrV" scroll-x="true" :show-scrollbar='false'>
				<view @tap="onSelectTopic(key)" :class="topicListPos==key?'topicItemVTo':'topicItemV'"
					v-for="(item,key) in topicList" :key="key">{{item.name}}</view>
			</scroll-view>
		</view>
		<scroll-view v-if="onlineList.length!=0" style="height: 60vh;" :scroll-y="true" @scroll="onScroll" :scroll-with-animation="true"
			:refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="onDataList"
			refresher-default-style="white" @scrolltolower="scrolltolower">
			<view @tap="onItemClick(item)" class="listBg" v-for="(item,key) in onlineList" :key="key">
				<image class="itemIv" :src="item.image" mode="aspectFill"></image>
				<view class="rightV">
					<view class="titleTv">{{item.title}} ></view>
					<view class="subTv">{{item.target}}</view>
					<view class="bottomV">
						<view class="bottomTv1">{{item.course_count}}个课时可预约</view>
						<view class="bottomTv2" @click.stop="onSeeClick(item)">查看</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<view v-if="onlineList.length==0"
			style="justify-content: center; align-items: center; display: flex; height: 50vh; color: #8D8D8D;">
			暂无数据
		</view>

		<uni-popup ref="popup" type="bottom" background-color="#1F1F1F">
			<view class="popupBg">
				<view class="topV">
					<view class="titleV">
						<view @tap="onSelectClick(1)" :class="screeningPos==1?'tv1':'tv1To'">时间</view>
						<view @tap="onSelectClick(2)" :class="screeningPos==2?'tv2':'tv2To'">教练</view>
						<view class="tv3"></view>
						<image @tap="onClseClick" class="iv" src="../../static/public/colse.svg"></image>
					</view>
					<view v-if="screeningPos==1" class="kechengV">
						<view class="leftKCV">
							<scroll-view scroll-y="true" class="leftKCVSRL" show-scrollbar="true">
								<view v-for="(data,index) in timeData" :key="index"
									:class="data.select?'leftKCVtV2To':'leftKCVtV2'" @tap="onSelectTimeClick(data)">
									{{data.name}}
								</view>
							</scroll-view>
						</view>
						<view class="rightKCV">
							<view style="height: 710rpx;">
								<scroll-view style="margin-bottom: 98rpx; height: 100%; margin-top: 20rpx;"
									scroll-y="true" show-scrollbar="true">
									<view v-for="(data,index) in jiaoLianList" :key="index"
										:class="data.select?'rightKCVTv2To':'rightKCVTv2'"
										@tap="onSelectJiaoLianClick(data)">
										{{data.time}}
										<image :src="data.coach_avatar"></image>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
					<view v-if="screeningPos==2" class="mendian">
						<view class="dianRightV">
							<view style="height: 710rpx;">
								<scroll-view style="margin-bottom: 98rpx; height: 100%; margin-top: 20rpx;"
									scroll-y="true" show-scrollbar="true">
									<view v-for="(data,index) in jiaoLianList" :key="index"
										:class="data.select?'dianRightTv2To':'dianRightTv2'"
										@tap="onSelectRightJiaoLianClick(data)">
										<image class="ivRight" :src="data.coach_avatar"></image>
										<view class="tvvRight">
											<view :class="data.select?'tv1ToRight':'tv1Right'">{{data.coach_name}}
											</view>
											<view :class="data.select?'tv2ToRight':'tv2Right'">{{data.coach_motto}}
											</view>
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
				</view>
				<view class="bottomV">
					<view class="bt1">
						<view class="btTimeTv">{{selectJiaoLian.time}}</view>
						<view class="btNameTv">{{selectJiaoLian.coach_name}}</view>
					</view>
					<view class="bt2" @tap="onConfirmClick">立即预约</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "online",
		props: {
			thmeId: {
				type: String,
				default: ""
			}
		},
		watch: {
			thmeId: {
				handler(value) {
					if (value) {
						this.topicListId = value;

						this.topicList.map((item, index) => {
							if (item.id == this.topicListId) {
								this.topicListPos = index;
								this.getOnlineList();
							}
						});

					}
				},
				immediate: true,
				deep: true
			}
		},
		data() {
			return {
				dayList: [], //时间
				dayListPos: -1,
				typeList: [], //类型
				typeListPos: 0,
				topicList: [], //主题
				topicListPos: 0,
				topicListId: "", //主题id
				onlineList: [], //训练营数据
				mPage: 1,
				triggered: false,
				scrollTop: 0,


				screeningPos: 1, // 1时间 2教练
				timeData: [], //时间
				shaixuanId: '', //数据id
				jiaoLianList: [], //教练列表
				selectJiaoLian: null, //选择的教练
			};
		},
		created() {
			this.getOnlineSearch();

		},
		activated() {
			let onlineId = uni.getStorageSync("router_online_id");
			console.log("=====" + onlineId)
		},
		methods: {
			getOnlineSearch() { //获取线上课筛选
				this.$api.getOnlineSearch({}).then((res) => {
					this.dayList = res.day7;
					this.typeList = res.target;
					this.topicList = res.theme;

					let data = {
						id: 0,
						name: "全部",
						select: true
					}
					res.time.map((item, index) => {
						item.select = false
						return item
					});
					this.timeData = [];
					this.timeData.push(data);
					this.timeData.push(...res.time);

					this.topicList.map((item, index) => {
						if (item.id == this.topicListId) {
							this.topicListPos = index;
						}
					});

					this.getOnlineList();
				}).catch((e) => {})
			},
			onDataList() {
				if (this.scrollTop == 0) {
					this.triggered = true;
					this.mPage = 1
					this.getOnlineList()
				}
			},
			scrolltolower() { //上拉加载
				this.mPage++
				this.getOnlineList()
			},
			onScroll(e) {
				this.scrollTop = e.detail.scrollTop
			},
			getOnlineList() { //获取线上课列表
				this.$api.getOnlineList({
					page: this.mPage,
					theme: this.topicList[this.topicListPos].id,
					target: this.typeList[this.typeListPos].id,
					day: this.dayListPos == -1 ? '' : this.dayList[this.dayListPos].day
				}).then((res) => {
					if (this.mPage == 1) {
						this.onlineList = res.list;
					} else {
						this.onlineList.push(...res.list)
					}
					this.triggered = false;
				}).catch((e) => {
					this.triggered = false;
				})
			},
			getOnlineCourse() { //获取筛选列表
				let timeDay = "";
				this.timeData.map((item, index) => {
					if (item.select && item.id != 0) {
						timeDay = item.id;
					}
				});
				this.$api.getOnlineCourse({
					time: timeDay,
					combo_id: this.shaixuanId,
				}).then((res) => {
					res.list.map((item, index) => {
						item.select = false
						return item
					});
					this.jiaoLianList = res.list;
				}).catch((e) => {})
			},
			onSeeClick(data) {
				this.timeData.map((item, index) => {
					if (index == 0) {
						item.select = true
					} else {
						item.select = false
					}
					return item
				});
				this.shaixuanId = data.id;
				this.selectJiaoLian = null;
				this.getOnlineCourse();
				this.$refs.popup.open();
			},
			onClseClick() {
				this.$refs.popup.close()
			},
			onSelectClick(e) { //时间 and 教练
				this.screeningPos = e;
			},
			onSelectTimeClick(data) { //选择时间
				this.timeData.map((items, index) => {
					items.select = false;
				});
				let isSele = data.select;
				data.select = !isSele;
				this.getOnlineCourse();
			},
			onSelectJiaoLianClick(data) {
				this.jiaoLianList.map((items, index) => {
					items.select = false;
				});
				let isSele = data.select;
				data.select = !isSele;
				this.selectJiaoLian = data;
			},
			onSelectRightJiaoLianClick(data) {
				this.jiaoLianList.map((items, index) => {
					items.select = false;
				});
				let isSele = data.select;
				data.select = !isSele;
				this.selectJiaoLian = data;
			},
			onConfirmClick() {
				if (this.selectJiaoLian) {
					this.$u.route({
						url: '/pages/schedule/OnlineDetails',
						params: {
							id: this.selectJiaoLian.id,
						}
					})
				}
			},

			onSelectDay(key) {
				this.dayListPos = key
				this.getOnlineList();
			},
			onSelectType(key) {
				this.typeListPos = key
				this.getOnlineList();
			},
			onSelectTopic(key) {
				this.topicListPos = key
				this.getOnlineList();
			},
			onItemClick(item) {
				this.$u.route({
					url: '/pages/schedule/OnlineDetails',
					params: {
						id: item.id,
					}
				})
			}
		}

	}
</script>

<style lang="scss">
	.timeBg {
		height: 150rpx;
		display: flex;

		.timeAllV {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #E6A5B4;
		}

		.itemTimeV {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.timeTv {
				font-size: 24rpx;
				color: #939393;
			}

			.timeTvTo {
				font-size: 24rpx;
				color: #E9E9E9;
			}

			.dayTv {
				width: 50rpx;
				height: 50rpx;
				border: 2px solid #E6A5B4;
				border-radius: 50%;
				font-size: 24rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20rpx;
				background-color: #E6A5B4;
			}

			.dayTvTo {
				width: 50rpx;
				height: 50rpx;
				border: 2px solid #E6A5B4;
				border-radius: 50%;
				font-size: 24rpx;
				color: #E6A5B4;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20rpx;
			}
		}
	}

	.typeBg {
		display: flex;
		align-items: center;
		margin-top: 10rpx;

		.typeAllV {
			font-size: 32rpx;
			color: #E8E8E8;
			padding-left: 15rpx;
			padding-right: 15rpx;
		}

		.typeScrV {
			flex: 1;
			white-space: nowrap;
			vertical-align: middle;
			overflow: hidden;

			.typeItemV {
				padding-left: 26rpx;
				padding-right: 26rpx;
				padding-top: 8rpx;
				padding-bottom: 8rpx;
				border-radius: 25rpx;
				border: 1rpx solid #E6A5B4;
				font-size: 24rpx;
				color: #FFFFFF;
				display: inline-block;
				margin-left: 20rpx;
				background-color: #E6A5B4;
			}

			.typeItemVTo {
				padding-left: 26rpx;
				padding-right: 26rpx;
				padding-top: 8rpx;
				padding-bottom: 8rpx;
				border-radius: 25rpx;
				border: 1rpx solid #E6A5B4;
				font-size: 24rpx;
				color: #E6A5B4;
				display: inline-block;
				margin-left: 20rpx;
			}
		}
	}

	.topicBg {
		display: flex;
		align-items: center;
		margin-top: 30rpx;

		.topicAllV {
			font-size: 32rpx;
			color: #E8E8E8;
			padding-left: 15rpx;
			padding-right: 15rpx;
		}

		.topicScrV {
			flex: 1;
			white-space: nowrap;
			vertical-align: middle;
			overflow: hidden;

			.topicItemV {
				padding-left: 26rpx;
				padding-right: 26rpx;
				padding-top: 8rpx;
				padding-bottom: 8rpx;
				border-radius: 25rpx;
				border: 1rpx solid #E6A5B4;
				font-size: 24rpx;
				color: #FFFFFF;
				display: inline-block;
				margin-left: 20rpx;
				background-color: #E6A5B4;
			}

			.topicItemVTo {
				padding-left: 26rpx;
				padding-right: 26rpx;
				padding-top: 8rpx;
				padding-bottom: 8rpx;
				border-radius: 25rpx;
				border: 1rpx solid #E6A5B4;
				font-size: 24rpx;
				color: #E6A5B4;
				display: inline-block;
				margin-left: 20rpx;
			}

		}
	}

	.listBg {
		height: 246rpx;
		display: flex;
		padding-left: 30rpx;
		padding-right: 30rpx;
		border-bottom: 1rpx solid #383838;
		display: flex;
		align-items: center;
		justify-content: center;

		.itemIv {
			width: 248rpx;
			height: 186rpx;
			background-color: #E6A5B4;
			border-radius: 10rpx;
		}

		.rightV {
			flex: 1;
			width: 100%;
			margin-left: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.titleTv {
				display: flex;
				width: 100%;
				font-size: 28rpx;
				color: #E8E8E8;
			}

			.subTv {
				display: flex;
				font-size: 24rpx;
				color: #858585;
				margin-top: 5rpx;
				width: 100%;
			}

			.bottomV {
				width: 100%;
				display: flex;
				align-items: center;
				margin-top: 30rpx;

				.bottomTv1 {
					flex: 1;
					font-size: 24rpx;
					color: #E6A5B4;
				}

				.bottomTv2 {
					width: 130rpx;
					height: 60rpx;
					background: #E6A5B4;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.popupBg {
		height: 900rpx;

		.topV {
			height: 802rpx;

			.titleV {
				display: flex;
				margin-top: 30rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;

				.tv1 {
					color: #CEF743;
					font-size: 32rpx;
					padding-bottom: 15rpx;
					box-sizing: border-box;
					border-bottom: 5rpx solid #CEF743;
					margin-right: 30rpx;
				}

				.tv1To {
					color: #8D8D8D;
					font-size: 32rpx;
					padding-bottom: 15rpx;
					box-sizing: border-box;
					border-bottom: 5rpx solid #00000000;
					margin-right: 30rpx;
				}

				.tv2 {
					color: #CEF743;
					font-size: 32rpx;
					padding-bottom: 15rpx;
					box-sizing: border-box;
					border-bottom: 5rpx solid #CEF743;
				}

				.tv2To {
					color: #8D8D8D;
					font-size: 32rpx;
					padding-bottom: 15rpx;
					box-sizing: border-box;
					border-bottom: 5rpx solid #00000000;
				}

				.tv3 {
					flex: 1;
				}

				.iv {
					width: 42rpx;
					height: 42rpx;
				}
			}

			.kechengV {
				display: flex;
				height: 710rpx;
				margin-top: 10rpx;
				box-sizing: border-box;

				.leftKCV {
					flex: 3;

					.leftKCVSRL {
						height: 100%;
						margin-bottom: 98rpx;
						margin-top: 20rpx;

						.leftKCVtV2 {
							margin-left: 30rpx;
							margin-right: 30rpx;
							height: 60rpx;
							background: #3D3F3E;
							border-radius: 10rpx;
							margin-bottom: 20rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 28rpx;
							color: #939393;
							border: 1rpx solid #00000000;
						}

						.leftKCVtV2To {
							margin-left: 30rpx;
							margin-right: 30rpx;
							height: 60rpx;
							background: rgba(206, 247, 67, 0.2);
							border-radius: 10rpx;
							margin-bottom: 20rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 28rpx;
							color: #CEF743;
							border: 1rpx solid #CEF743;
						}

						.leftKCVtV3 {
							display: flex;
							align-items: center;
							justify-content: center;
							color: #fff;
							font-size: 32rpx;
							padding-top: 20rpx;
							padding-bottom: 30rpx;
							box-sizing: border-box;
						}
					}
				}

				.rightKCV {
					flex: 7;

					.rightKCVTv2 {
						margin-left: 30rpx;
						margin-right: 30rpx;
						height: 80rpx;
						background: #3D3F3E;
						border-radius: 10rpx;
						margin-bottom: 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 28rpx;
						color: #939393;
						border: 1rpx solid #00000000;
						padding-left: 20rpx;

						image {
							width: 50rpx;
							height: 50rpx;
							border-radius: 50%;
							margin-right: 20rpx;
						}
					}

					.rightKCVTv2To {
						margin-left: 30rpx;
						margin-right: 30rpx;
						height: 80rpx;
						background: rgba(206, 247, 67, 0.2);
						border-radius: 10rpx;
						margin-bottom: 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-around;
						font-size: 28rpx;
						color: #CEF743;
						border: 1rpx solid #CEF743;
						padding-left: 20rpx;

						image {
							width: 50rpx;
							height: 50rpx;
							border-radius: 50%;
							margin-right: 20rpx;
						}
					}
				}
			}

			.mendian {
				display: flex;
				height: 725rpx;
				margin-top: 10rpx;
				box-sizing: border-box;

				.dianRightV {
					flex: 1;

					.dianRightTv2 {
						margin-left: 30rpx;
						margin-right: 30rpx;
						height: 120rpx;
						background: #3D3F3E;
						border-radius: 10rpx;
						margin-bottom: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						color: #939393;
						border: 1rpx solid #00000000;
						padding-left: 20rpx;
						padding-right: 20rpx;
					}

					.dianRightTv2To {
						margin-left: 30rpx;
						margin-right: 30rpx;
						height: 120rpx;
						background: rgba(206, 247, 67, 0.2);
						border-radius: 10rpx;
						margin-bottom: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						color: #CEF743;
						border: 1rpx solid #CEF743;
						padding-left: 20rpx;
						padding-right: 20rpx;
					}

					.ivRight {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}

					.tvvRight {
						display: flex;
						flex-direction: column;
						margin-left: 20rpx;
					}

					.tv1Right {
						font-size: 32rpx;
						color: #939393;
					}

					.tv1ToRight {
						font-size: 32rpx;
						color: #E6A5B4;
					}

					.tv2ToRight {
						font-size: 24rpx;
						color: #E6A5B4;
						margin-top: 7rpx;
					}

					.tv2Right {
						font-size: 24rpx;
						color: #939393;
						margin-top: 7rpx;
					}
				}
			}
		}

		.bottomV {
			display: flex;
			height: 98rpx;

			.bt1 {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				flex: 6;
				background: #FFFFFF;

				.btTimeTv {
					font-size: 28rpx;
					color: #FFFFFF;
				}

				.btNameTv {
					margin-top: 4rpx;
					font-size: 28rpx;
					color: #FFFFFF;
				}

			}

			.bt2 {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 4;
				background: #CEF743;
				color: #333333;
				font-size: 32rpx;
			}
		}
	}
</style>
